<template>
	<view >
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">订单库存总额查询</block>
		</cu-custom>
		<view class="container">
			<!-- 条件查询输入框 -->
			<view class="search-bar">
				<view class="input-wrapper">
					<uni-datetime-picker type="datetime" return-type="timestamp"
						v-model="samplingDate" />
<!-- 					<input v-model="searchVal" placeholder="请输入查询数据" @input="handleInput" :focus="focusStateProduct"
						style="background-color: white;" autofocus /> -->
				</view>
				<button @click="search">查询</button>
			</view>
			<view class="uni-flex uni-column">
<!-- 				<view>日期:{{dataDate}}</view>
				<view>数据源:{{dataSource}}</view> -->
				<view class="flex-item flex-item-V uni-bg-blue" style="font-size: 14px;">当月订单总额(万):{{order.orderAmount}}</view>
				<view class="flex-item flex-item-V uni-bg-green" style="font-size: 14px;">当月出货总额(万):{{order.orderDeliveryAmount}}</view>
				<view class="flex-item flex-item-V uni-bg-blue" style="font-size: 14px;">当月采购总额(万):{{order.purchaseOrderAmount}}</view>
				<view class="flex-item flex-item-V uni-bg-green" style="font-size: 14px;">当前未出总额(万):{{order.orderUnDeliveryAmount}}</view>
				<view class="flex-item flex-item-V uni-bg-blue" style="font-size: 14px;">当前产品库存总额(万):{{order.productInvAmount}}</view>
				<view class="flex-item flex-item-V uni-bg-green" style="font-size: 14px;">当前物料库存总额(万):{{order.metrialInvAmount}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/api/api.js'
	import {
		USER_INFO,
		SASS_DOMAIN_ID,
		SASS_TENANT_ID,
		SASS_DOMAIN_NAME
	} from "@/common/util/constants"
	import CustomDownSearch from '@/components/my-componets/custom-down-search.vue'
	import tableData from '../workorder/table/tableData.js'

	export default {
		name:"queryOrderInvTotalPrice",
		components: {
			CustomDownSearch,
		},
		data() {
			return {
				subOrderDrawerShow: false,
				searchKeyword: '',
				searchVal: '',
				samplingDate: new Date(),
				searchCustId: null,
				dataSource:'',
				dataDate:'',
				tableData: [],
				itemChilds: [],
				custList: [],
				custListText: [],
				order: {
					orderAmount: 0,
					orderDeliveryAmount: 0,
					orderUnDeliveryAmount:0,
					productInvAmount:0,
					metrialInvAmount:0,
					purchaseOrderAmount: 0,
				},
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false,
				url: {
					index : '/statistics/index',
					custList: '/bas/basCustomer/list',
					list: '/som/somSalseOrder/list',
					queryById: '/som/somSalseOrder/querySomSalseOrderItemByMainId',
					saveShareLink : '/som/somSalseOrder/saveShareLink',
					pomIndex: '/pom/statistics/index'
				}
			};
		},
		onLoad() {
			// this.selectedIndexs = []
			// this.getData(1)
		},
		created() {
			// this.getCusts()
			this.getOrderAmount()
			this.getPomAmount()
		},
		methods: {
			getMonthRange(date = new Date()) {
				  const pad = n => n.toString().padStart(2, '0')
				  const year = date.getFullYear()
				  const month = date.getMonth()
				  
				  const first = new Date(year, month, 1)
				  const last = new Date(year, month + 1, 0)
				  
				  return {
					firstDay: `${year}-${pad(month+1)}-${pad(first.getDate())}`,
					lastDay: `${year}-${pad(month+1)}-${pad(last.getDate())}`
				  }
			},
			getPomAmount() {
				this.$http.get(
					this.url.pomIndex, {
						params: {
							beginTime: this.getMonthRange(this.samplingDate).firstDay,
							endTime:this.getMonthRange(this.samplingDate).lastDay,
							currency:'CNY',
						}
					}).then(res => {
					console.log("res::order>", res)
					if (res.data.result) {
						let data = res.data.result						
						this.order.purchaseOrderAmount = data.amountTot ? Number( (data.amountTot / 10000)).toFixed(3) : 0
					}
				})				
			},
			getOrderAmount() {
				
				this.$http.get(
					this.url.index, {
						params: {
							yearOrMonth: 'month',
							date: this.getMonthRange(this.samplingDate).firstDay,
							currency:'CNY',
						}
					}).then(res => {
					console.log("res::order>", res)
					if (res.data.result) {
						let data = res.data.result			
						// this.dataDate = JSON.stringify(this.samplingDate.toLocaleDateString()) + this.getMonthRange(this.samplingDate).firstDay
						// this.dataSource = JSON.stringify(data)
						this.order.orderAmount = data.orderStatis && data.orderStatis.length>0 ? Number( (data.orderStatis[0].amount / 10000)).toFixed(3) : 0
						this.order.orderDeliveryAmount = data.deliveryStatis && data.deliveryStatis.length>0 ? Number( (data.deliveryStatis[0].amount / 10000)).toFixed(3) : 0
						this.order.orderUnDeliveryAmount = data.orderUnStatis && data.orderUnStatis.length>0 ? Number( (data.orderUnStatis[0].amount / 10000)).toFixed(3) : 0
						this.order.materialInvAmount = data.materialInvAmount ? Number((data.materialInvAmount / 10000)).toFixed(3) : 0
						this.order.productInvAmount = data.productInvAmount ? Number((data.productInvAmount / 10000)).toFixed(3) : 0
						// this.custList = []
						// data.forEach((item) => {
						// 	let obj = {
						// 		value: item.id,
						// 		text: item.shortName
						// 	}
						// 	this.custList.push(obj)
						// 	this.custListText.push(obj.text)
						// })
					}
				})				
			},
			changeSupp(val) {
				this.searchCustId = val
			},
			handleTouchStart(event) {
				// 获取触摸点的信息
				const touch = event.touches[0];
		 	const x = touch.clientX;
				const y = touch.clientY;
				console.log(`触摸开始，坐标为：(${x}, ${y})`);
				this.$refs.selSupp.handelDropDown(x, y)
			},
			getCusts() {
				console.log("beging find cust.")
				this.$http.get(
					this.url.custList, {
						params: {
							pageSize: 1000,
							status: 1
						}
					}).then(res => {
					console.log("res::cust>", res)
					if (res.data.result.records) {
						let data = res.data.result.records
						this.custList = []
						data.forEach((item) => {
							let obj = {
								value: item.id,
								text: item.shortName
							}
							this.custList.push(obj)
							this.custListText.push(obj.text)
						})
					}
				})
			},
			handleDetail(id) {
				let that = this
				let params = {
					'id': id,
				}
				this.loading = true
				this.$http.get(this.url.queryById, {
					params: params
				}).then(res => {

					this.loading = false
					that.itemChilds = res.data.result.records || res.data.result;
					console.log(that.itemChilds)
					console.log(res.data.result)
					that.$nextTick(() => {
						this.subOrderDrawerShow = true
					})

				})
			},
			subOrderCancel() {
				console.log('您点击了取消按钮')
				this.subOrderDrawerShow = false;
			},
			//确定
			subOrderEnsure() {
				console.log('您点击了确定按钮')
				this.subOrderDrawerShow = false;
			},
			setFocusProduct() {
				let that = this
				this.$nextTick(() => {
					setTimeout(() => {
						that.focusStateProduct = true
					}, 1000)
				})

			},
			handleInput() {

			},
			selectedItems() {
				return this.selectedIndexs.map(i => this.tableData[i])
			},
			// 多选
			selectionDrawChange(e) {

			},
			selectionChange(e) {
				console.log(e.detail.index)
				this.selectedIndexs = e.detail.index
				if (this.selectedIndexs.length == 1) {
					let rows = this.selectedItems()
					this.handleDetail(rows[0].id)
				}
			},
			//批量删除
			delTable() {
				console.log(this.selectedItems())
			},
			// 分页触发
			change(e) {
				this.$refs.table.clearSelection()
				this.selectedIndexs.length = 0
				this.getData(e.current)
			},
			clearSearchKeyword() {
				debugger
				this.searchVal = ''
			},
			// 搜索
			search(val) {
				// this.getData(1, this.searchVal)
				console.log(val)
				let _date = new Date(this.samplingDate)
				this.samplingDate = _date
				this.getOrderAmount()
				this.getPomAmount()
			},
			getData(pageCurrent, value = '') {
				this.pageCurrent = pageCurrent
				let that = this
				let params = {
					'queryName': value,
					'pageNo': this.pageCurrent,
					'pageSize': this.pageSize,
					'column': 'createTime,updateTime',
					'order': 'desc',
				}
				this.loading = true
				this.$http.get(this.url.list, {
					params: params
				}).then(res => {
					this.loading = false
					this.tableData = res.data.result.records || res.data.result;
					console.log(this.tableData)
					this.setFocusProduct()
					if (res.data.result.total) {
						this.total = res.data.result.total
					} else {
						this.total = 0
					}
				})
			},
			// 获取数据
			getData1(pageCurrent, value = '') {
				this.loading = true
				this.pageCurrent = pageCurrent
				this.request({
					pageSize: this.pageSize,
					pageCurrent: pageCurrent,
					value: value,
					success: res => {
						// console.log('data', res);
						this.tableData = res.data
						this.total = res.total
						this.loading = false
					}
				})
			},
			// 伪request请求
			request(options) {
				const {
					pageSize,
					pageCurrent,
					success,
					value
				} = options
				let total = tableData.length
				let data = tableData.filter((item, index) => {
					const idx = index - (pageCurrent - 1) * pageSize
					return idx < pageSize && idx >= 0
				})
				if (value) {
					data = []
					tableData.forEach(item => {
						if (item.name.indexOf(value) !== -1) {
							data.push(item)
						}
					})
					total = data.length
				}

				setTimeout(() => {
					typeof success === 'function' &&
						success({
							data: data,
							total: total
						})
				}, 500)
			},


		}
	};
</script>

<style scoped>
	.input-wrapper {
		position: relative;
		flex: 1;
	}

	.input-wrapper input {
		width: 100%;
		height: 40px;
		padding: 0 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
		margin-right: 10px;
		box-sizing: border-box;
		/* 确保内边距和边框不会增加元素的宽度 */
	}

	.clear-button {
		position: absolute;
		top: 50%;
		right: 20px;
		/* 调整按钮的位置，避免被输入框的边框遮挡 */
		transform: translateY(-50%);
		background: none;
		border: none;
		color: #999;
		font-size: 16px;
		cursor: pointer;
		z-index: 1;
		/* 确保按钮在最上层，不会被其他元素遮挡 */
	}

	.container {
		padding: 6px;
	}

	.search-bar {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.search-bar input {
		flex: 1;
		height: 40px;
		padding: 0 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
		margin-right: 10px;
	}

	.search-bar button {
		height: 40px;
		padding: 0 20px;
		background-color: #007aff;
		color: #fff;
		border: none;
		border-radius: 5px;
		align-items: center;
		line-height: 40px;
	}
	.flex-item {
		width: 33.3%;
		height: 200rpx;
		text-align: center;
		line-height: 200rpx;
	}

	.flex-item-V {
		width: 100%;
		height: 150rpx;
		text-align: center;
		line-height: 150rpx;
	}

	.text {
		margin: 15rpx 10rpx;
		padding: 0 20rpx;
		background-color: #ebebeb;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #777;
		font-size: 26rpx;
	}
	uni-table {
		margin-bottom: 20px;
	}

	uni-pagination {
		display: flex;
		justify-content: center;
	}
</style>
